<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教师综合评教系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .addDiv{
            display: none;
        }
        .content{
            padding-top:10px;
        }
        .ok{
            width: 97px;
        }
        .tiaojian{
            margin-left: 80px;
        }
        .tiaojian div{
            float: left;
        }
        .tiaojian input{
            width: 200px;
        }
        .content .layui-form-label{
            margin-top: 10px;
        }
        .content .layui-input-block{
            width: 75%;
            margin-top: 10px;
        }
        .button{
            margin-top: 20px;
        }
        .left{
            position: absolute;
            left: 0px;
            top: -10px;
            height: 500px;
            width: 1166px;
        }

        .chaxun{
            position: absolute;
            top: 40px;
            left: 787px;
            width: 198px;
        }
    </style>
</head>
<body>
    <div class="layui-body left">
            <table class="layui-hide" id="demo" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">

                </div>

                <div class="layui-btn-container tiaojian">
                    <div>
                        <label class="layui-form-label ok">故障教室:</label>
                        <input type="text" id="classroom" name="classroom"  placeholder="请输入标题" autocomplete="off" class="layui-input" >
                    </div>
                    <div>
                        <label class="layui-form-label ok">故障标题:</label>
                        <input type="text" id="title" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                    <div>
                        <label class="layui-form-label ok">故障状态:</label>
                        <select id="state" name="state" lay-verify="required">
                            <option value="">请选择</option>
                            <option value="0">未处理</option>
                            <option value="1">处理中</option>
                            <option value="2">处理完成</option>
                        </select>
                    </div>
                    <div class="c"></div>
                    <div>
                        <label class="layui-form-label ok">报告人:</label>
                        <select id="baogaoren" name="baogaoren" lay-verify="required">
                            <option value="">请选择</option>
                        </select>
                    </div>
                    <div>
                    <label class="layui-form-label ok">解决人:</label>
                    <select id="jiejueren" name="jiejueren" lay-verify="required">
                        <option value="">请选择</option>
                    </select>
                     </div>
                    <button lay-event="search" class="layui-btn layui-btn-sm chaxun" style=" height: 38px">查询</button>
                </div>
                <div class="c"></div>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="show">查看详情</a>
                <a class="layui-btn layui-btn-xs" style="background-color: gold" lay-event="weixiu">去处理</a>
            </script>

            <!-- 序号 -->
            <script type="text/html" id="xuhao">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
    </div>
    <!--  添加结束  -->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/public.js"></script>
<script>
    var header = {
        Authorization: window.localStorage.getItem("Authorization")
        , userid: window.localStorage.getItem("userid")
    }
    layui.use(['element','table','layer','form'], function(){
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#demo'
            ,url:breakdown.show
            ,method:'post'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '批次信息表'
            ,request:{
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'rows' //每页数据量的参数名，默认：limit
            },headers:header,
            done:function (res) {
                if (res.status==-2) {
                    layer.confirm('身份过期，重新登录',{btn:['知道了'],
                        cancel: function(index, layero){
                            //取消操作，点击右上角的X
                            parent.location.href = "../login.html";
                        }},function(index){
                        parent.location.href = "../login.html";
                    });
                }
            }
            ,contentType:"application/json; charset=utf-8"
            ,cols: [[
                {title: '序号',templet: '#xuhao',type:'numbers',fixed: 'left'}
                ,{field:'breakdownId', title:'ID',hide:true}
                ,{field:'classRoom', title:'故障教室',width:120}
                ,{field:'breakdownTitle', title:'故障标题'}
                ,{field:'breakdownContent', title:'故障详情',hide:true}
                ,{field:'breakdownState', title:'处理状态',width:110,
                    templet:function (d) {
                        if(d.breakdownState =="未处理"){
                            return '<span style="color:#000000;">' + d.breakdownState + '</span>'
                        }else if(d.breakdownState =="处理中"){
                            return '<span style="color:orangered;">' + d.breakdownState + '</span>'
                        }else{
                            return '<span style="color:green;">' + d.breakdownState + '</span>'
                        }
                    }}
                ,{field:'createName', title:'报告人'}
                ,{field:'createTime', title:'创建时间',width:200}
                ,{field:'solveName', title:'处理人'}
                ,{field:'solveTime', title:'处理时间',width:200}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:160}
            ]]
            ,page:true
            ,parseData: function (res) {
                return{
                    "code":res.status,
                    "msg":res.message,
                    "count":res.total,
                    "data":res.data
                }
            }
        });

        table.on('toolbar(test)',function (obj) {
            if (obj.event==='search'){
                table.reload('demo', {
                    method:"post",
                    page: {
                        curr: 1
                    },
                    where: {
                        classRoom:$("#classroom").val(),
                        breakdownTitle:$("#title").val(),
                        breakdownState:$("#state").val(),
                        createBy:$("#baogaoren").val(),
                        solveBy:$("#jiejueren").val()
                    }
                });
                showTeacher();
            }
        });


        //监听行操作
        table.on('tool(test)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent==='show'){
                layer.open({
                    type:2,
                    title:'故障详情',
                    area: ['60%', '70%'], //宽高
                    content: '../detail/breakdowndetail.html',
                    offset:'40px',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //初始化表单数据的值
                        body.find("#classRoom").html(data.classRoom); //要修改的每个td的值存为变量传进去
                        body.find("#state").html(data.breakdownState);
                        body.find("#title").html(data.breakdownTitle);
                        body.find("#content").html(data.breakdownContent);
                        body.find("#baogaoren").html(data.createName);
                        body.find("#baogaotime").html(data.createTime);
                        body.find("#jiejueren").html(data.solveName);
                        body.find("#jiejuetime").html(data.solveTime);
                    }
                })
            }else if(layEvent==='weixiu'){
                layer.confirm('确认处理吗？',function (index) {
                    var parm = {
                        solveBy: localStorage.getItem("userid"),
                        breakdownState: "1",
                        breakdownId: data.breakdownId
                    }
                    console.log(JSON.stringify(parm))
                    $.ajax({
                        method:"post",
                        url: breakdown.updateState,
                        data: JSON.stringify(parm),
                        dataType: "json",
                        contentType: 'application/json',
                        headers:header,
                        success: function (res) {
                            if (res.status != -1) {
                                layer.confirm(res.message, {btn: ['知道了']}, function (index) {
                                    layer.close(index);
                                    table.reload('demo', {
                                        url:breakdown.show
                                    });
                                    showTeacher();
                                })
                                layer.close(index);
                            }else if (res.status==-2) {
                                layer.confirm('身份过期，重新登录',{btn:['知道了'],
                                    cancel: function(index, layero){
                                        //取消操作，点击右上角的X
                                        parent.location.href = "../login.html";
                                    }},function(index){
                                    parent.location.href = "../login.html";
                                });
                            }
                        }
                    })
                });
            }
        });

        showTeacher();

        function showTeacher(){
            var param = {page:"",rows:""}
            $.ajax({
                method:"post",
                url:'http://localhost:8082/auth/showTeacher',
                dataType:'json',
                data:JSON.stringify(param),
                headers:header,
                contentType:'application/json',
                success:function (res) {
                    if(res.status==0){
                        for(var i=0;i<res.data.length;i++){
                            //等于1就代表是任课教师
                            if(res.data[i].roleId==="1"){
                                $("#baogaoren").append("<option value='"+res.data[i].userId+"'>"+res.data[i].userName+"</option>")
                            }else if(res.data[i].roleId==="2"){
                                $("#jiejueren").append("<option value='"+res.data[i].userId+"'>"+res.data[i].userName+"</option>")
                            }
                            form.render('select');
                        }
                    }else if(res.status==-2) {
                        layer.confirm('身份过期，重新登录',{btn:['知道了'],
                            cancel: function(index, layero){
                                //取消操作，点击右上角的X
                                parent.location.href = "../login.html";
                            }},function(index){
                            parent.location.href = "../login.html";
                        });
                    }else {
                        layer.msg("出现了未知的故障");
                    }
                }
            });
        }
    });
</script>
</body>
</html>
